import React from 'react';
import Quill from 'quill';
import qs from 'qs';
import 'quill/dist/quill.snow.css';
import './../static/css/postlist.css';
import './../static/css/style.css';

export default class editor extends React.Component {
  constructor(props) {
    super(props);
    this.editor=null;
  }

  componentDidMount() {
  	const toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
 
            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction
 
            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
 
            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['link', 'image', 'video'],
            ['clean']                                         // remove formatting button
        ];
	  const textbox = this.refs.textarea;
	  const options = {
        debug: 'warn',
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: ' ',
        readOnly: false,
        theme: 'snow'
    };
    const editor =this.editor= new Quill(textbox,options);
	  const {value}=this.props.value;
	  if (value) 
      editor.clipboard.dangerouslyPasteHTML(value);
	  editor.on('text-change', this.handleChange.bind(this));
  }

  handleChange () {
        this.props.onChange(this.editor.root.innerHTML);
  }

  render() {
    return (
      <div className="ptheight bgwhite ">
      	<div ref="textarea"></div>
      </div>
    );
  }
}